<template>
  <div id="article">
    <div class="header">
      <Header :name="name"></Header>
    </div>
    <div v-for="item in data" :key="item.id" class="item">
      <p>{{ item.id + "." + item.title }}</p>
      <span>{{ item.content }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import Header from "./Header.vue";
import { useRoute } from "vue-router";

const route = useRoute();
const name = route.query.name;
console.log(name);

const data = reactive([
  {
    id: 1,
    title: "信息收集",
    content:
      "个人信息: 我们可能会收集您的姓名、联系方式、电子邮件地址等个人信息，以便为您提供更好的服务。位置信息:当您使用我们的美发预约服务时，我们可能会收集您的位置信息，以确走您附近的美发店或美发师。日志信息:我们会自动收集关于您设备和应用程序的日志信息，例如您的IP地址、设备型号、操作系统版本等。",
  },
  {
    id: 2,
    title: "信息使用",
    content:
      "我们可能会将您的个人信息用于以下目的:提供服务: 我们会使用您的个人信息来为您提供美发预约服务，包括确认预约、发送提醒等。改进服务: 我们会使用您的个人信息来改进我们的服务，例如根据您的反馈进行优化、提供个性化推荐等。市场研究: 我们可能会使用您的个人信息来进行市场研究，以了解我们的用户需求和行为模式。",
  },
  {
    id: 3,
    title: "信息保护",
    content:
      "我们采取以下措施来保护您的个人信息安全:加密传输: 我们会使用加密技术来保护您在传输过程中的个人信息安全。访问控制: 我们会限制对您的个人信息的访问，只有授权的人员才能访问您的个人信息。数据备份: 我们会对您的个人信息进行备份，以防数据丢失或损坏。",
  },
  {
    id: 4,
    title: "隐私策略更新",
    content:
      "我们保留随时更新本隐私政策的权利，更新后的隐私政策将在美发服务APP上发布。",
  },
]);
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

#article {
  width: 100vw;
  height: 100vh;
}

.item {
  width: 90%;
  margin-left: 5%;
}

.item p {
  font-size: 1rem;
  line-height: 2rem;
  margin-top: 1rem;
}

.item span {
  font-size: 0.9rem;
  line-height: 1.5rem;
  color: #666666;
}
</style>